<template>
  <div class="chatRoomBootomTop">
    <div class="chatRoomBootomTop_voice iconfont">&#xe6c1;</div>
    <van-field class="chatRoomBootomTop_input_input" v-model="input"
               center
               type="textarea"
               :autosize="{ maxHeight: 100, minHeight: 25 }"
               placeholder="请输入内容"
               rows="1"
               @keyup.enter="send"
    />
    <div class="chatRoomBootomTop_demo">
      <span class="iconfont chatRoomBootomTop_demo_demo" >&#xe678;</span>
      <span class="iconfont chatRoomBootomTop_demo_add"  >&#xe68f;</span>
<!--      <van-button class="iconfont chatRoomBootomTop_demo_send" size="mini" round type="success" v-show="isShow" @click="sendOut">发送</van-button>-->

    </div>
  </div>
</template>

<script>
export default {
  name: "chatRoomBootomTop",
  data(){
    return{
      input:'',
      isShow:false,
    }
  },
  methods:{
    send(){
      console.log(this.input);
    },
  }
};
</script>

<style lang="scss" scope>
.chatRoomBootomTop {
  display: flex;
  align-items: center;
  padding: 3px 10px;
  background-color: rgba(248, 245, 245, 0.99);
  &_demo {
    display: flex;
    margin-left: 10px;
    align-items: center;
    &_add {
      font-size:28px;
      color: #535151;
    }
    &_send {
      font-size: 18px;
    }
    &_demo {
      font-size: 28px;
      color: #535151;
    }
  }
  &_input {
    &_input {
      flex: 1;
      padding: 5px 5px;
      border-radius: 5px;
      border: 1px solid transparent;
      outline: none;
      font-size: 18px;
      &:focus {
        border: 1px solid #2299ee;
      }
    }
  }
  &_voice {
    font-size: 28px;
    color: #666;
    margin-right: 10px;
    flex: none;
  }
}
</style>
